<template>
  <div id="app" class="flex">
    <div class="n-box">
      <img class="homeLog" :src="'./img/homeLong.png'" />
      <div class="n-ul">
        <el-menu :unique-opened="true" @open="handleOpen" router :default-active="routeSubset" @close="handleClose">
          <recursive-menu :menu-items="navigation" :menuArr="menuArr"></recursive-menu>
        </el-menu>


      </div>
      <div class="exit">
        <div class="exit-box">
          <img :src="'./img/et.png'" />
          <div>退出</div>
        </div>
      </div>
    </div>

    <div class="headline-box flex">
      <div class="headline-menu flex-left flex ">
        <img :src="'./img/userlog.png'" class="m-img1">
        <div class="">管理员 {{ user.phone }}</div>
        <img :src="'./img/setpwd.png'" class="m-img2">
        <div>修改密码</div>
        <!-- <img :src="'./img/kz.png'" class="m-img3"> -->
      </div>
      <div class="magnify" @click="toggleFullScreen">
        <img :src="'./img/magnify.png'" />
      </div>
      <div>

      </div>
    </div>




    <!-- <router-view class="router"></router-view> -->
  </div>
</template>

<script>
import RecursiveMenu from './RecursiveMenu.vue';
import VueRouter from 'vue-router';
export default {
  components: {
    RecursiveMenu,
  },
  name: 'NavigationBar',
  data() {
    return {
      navigation: [
        { id: 1, text: "首页", num: 0, img: './img/nul1.png', imgOpt: './img/nulo1.png', url: '/home', list: [], rank: 1, },
        { id: 2, text: "电台管理", num: 0, img: './img/nul2.png', imgOpt: './img/nulo2.png', url: '/control', list: [], rank: 1 },
        { id: 3, text: "连续探测", num: 3, img: './img/nul3.png', imgOpt: './img/nulo3.png', url: '/continuous', rank: 1, list: [{ id: 6, text: '连续探测频率表设置', url: '/detect', list: [], rank: 2 }, { id: 7, text: '连续探测结果生成', url: '/detectResult', list: [], rank: 2 }, { id: 8, text: '时段最优文件列表查询', url: '/detectResultTime', list: [], rank: 2 }] },
        { id: 4, text: "选频探测", num: 2, img: './img/nul3.png', imgOpt: './img/nulo3.png', url: '/frequencySelecting', rank: 1, list: [{ id: 9, text: '选频率探测列表', url: '/detectSelect', list: [], rank: 2 }, { id: 10, text: '选频结果查询', url: '/detectSelectResult', list: [], rank: 2 }, { id: 11, text: '时段最优文件列表查询', url: '/detectSelectResultTime', list: [], rank: 2 }] },
        { id: 5, text: "公共服务", num: 3, img: './img/nul4.png', imgOpt: './img/nulo4.png', url: '/public', rank: 1, list: [{ id: 12, text: '定时传输服务', url: '/serveTiming', list: [], rank: 2 }, { id: 13, text: '实时传输服务', url: '/serveRealTime', list: [], rank: 2 }] }
      ],
      pitch: 0,
      opt: 1,
      listOpt: 0,
      optList: 1,
      user: {
        phone: 15915734873
      },
      menuArr: [''],
      routeSubset: '',

    }
  },
  methods: {
    setOpt(index) {
      this.opt = index;
    },
    setListOpt(index) {
      this.listOpt = index
    },
    setNavigation(id) {
      this.opt = id;
      this.optList = 1;
    },

    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
      this.menuArr = keyPath;
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    select(index, indexPath) {
      console.log('激活回调');
      console.log(index);
      console.log(indexPath);
    },

    toggleFullScreen() {
      const element = document.documentElement;

      if (document.fullscreenElement) {
        // 如果已经全屏，则退出全屏
        document.exitFullscreen();
      } else {
        // 否则进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    }




  },
  mounted() {

  },
  watch: {

    $route(to, from) {
      const lastRoute = to.matched[to.matched.length - 1];
      if (lastRoute) {
        // 获取最终匹配到的路由的路径
        this.routeSubset = lastRoute.path;
        // console.log('路由变化了1：', this.routeSubset);
      }
    },
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听，以防止内存泄漏

  },

}
</script>

<style scoped lang="less">
.el-menu {
  background-color: transparent;
  font-weight: 18px;
  --el-menu-text-color: #9A9DAA;
  // --el-menu-hover-text-color:#ffffff;
  --el-menu-hover-bg-color: none;
  --el-menu-bg-color: none;

  border-right: none;
}
</style>
